<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">用户详情</span>
    </div>
    <div class="jx-detail">
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            基本信息
          </div>
          <div class="list">
            <span>渠道来源：</span>
            <div class="right">
              <span>{{userDetail.channelSource || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>用户昵称：</span>
            <div class="right">
              <span>
                <img class="icon" v-if="userDetail.consumerGender == '女'" src="/static/img/u913.png"/>
                {{userDetail.consumerNickname || '--'}}
              </span>
            </div>
          </div>
          <div class="list">
            <span>店铺logo：</span>
            <div class="right">
              <img class="logo" :src="userDetail.consumerLogoImgUrl"/>
            </div>
          </div>
          <div class="list">
            <span>登录账号：</span>
            <div class="right">
              <span>{{userDetail.consumerLoginname || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>注册时间：</span>
            <div class="right">
              <span>{{userDetail.createAt || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>手机型号：</span>
            <div class="right">
              <span v-for="(item,index) in userDetail.consumerPhoneModels" :key="index">{{item || '--'}}，</span>
            </div>
          </div>
          <div class="list">
            <span>手机IME号：</span>
            <div class="right">
              <span  v-for="(item,index) in userDetail.consumerPhoneIMEs" :key="index">{{item || '--'}}，</span>
            </div>
          </div>
          <div class="list">
            <span>所在地区：</span>
            <div class="right">
              <span>{{userDetail.shopLocationProvinceCity || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>注册定位：</span>
            <div class="right">
              <span class="blue">
                <img class="icon" src="/static/img/u178.png"/>
                {{userDetail.createLocation || '--'}}
              </span>
            </div>
          </div>
          <div class="list">
            <span>活动区域：</span>
            <div class="right">
              <span>共【<el-button @click="editRow" type="text" size="small">{{userDetail.consumerAreaCount || '0'}}</el-button>】个经常活动区域</span>
            </div>
          </div>
          <div class="list">
            <span>用户标签：</span>
            <div class="right">
              <span v-for="(item,index) in userDetail.consumerTags" :key="index">{{item || '--'}}，</span>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">社交信息</div>
          <div class="list">
            <span>话题：</span>
            <div class="right">
              <span>发布【{{userDetail.consumerTopicCount || '0'}}】，回复【{{userDetail.consumerReplyCount || '0'}}】</span>
            </div>
          </div>
          <div class="list">
            <span>社交活跃度：</span>
            <div class="right">
              <span>{{userDetail.consumerSocialActiveScore || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>APP活跃：</span>
            <div class="right">
              <span>7日打开次数【{{userDetail.consumerAppActive7dOpenCount || '0'}}】，7日停留时间【{{userDetail.consumerAppActive7dUseHour || '0'}}小时】</span>
            </div>
          </div>
          <div class="list">
            <span>APP活跃度：</span>
            <div class="right">
              <span>{{userDetail.consumerAppActiveScore || '--'}}</span>
            </div>
          </div>
          <div class="title" style="margin-top: 35px;">实名认证信息</div>
          <div class="list">
            <span>姓名：</span>
            <div class="right">
              <span>{{userDetail.consumerRealname || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>身份证号码：</span>
            <div class="right">
              <span>{{userDetail.consumerIdCard || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>身份证图片：</span>
            <div class="right">
              <img class="pic" :src="userDetail.consumerIdCardFrontImgUrl"/> 
              <img class="pic" :src="userDetail.consumerIdCardBackImgUrl"/> 
            </div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">
            车辆信息
          </div>
          <el-tabs type="card" v-model="other.activeName">
            <el-tab-pane v-for="(item,index) in userDetail.cars" :key="index" :label="item.carModel" :name="item.carModel">
              <div class="detail-item" v-loading="boo.loadinginfo" style="margin-bottom: 0;">
                <div class="item_2">
                  <div class="list">
                    <span>汽车型号：</span>
                    <div class="right">
                      <span>{{item.carModel || '--'}}</span>
                    </div>
                  </div>
                  <div class="list">
                    <span>车牌号：</span>
                    <div class="right">
                      <span>{{item.carNo || '--'}}</span>
                    </div>
                  </div>
                  <div class="list">
                    <span>首次上牌：</span>
                    <div class="right">
                      <span>{{item.boardingFirstDate || '--'}}</span>
                    </div>
                  </div>
                  <div class="list">
                    <span>车辆登记人：</span>
                    <div class="right">
                      <span>{{item.carOwner || '--'}}</span>
                    </div>
                  </div>
                  <div class="list">
                    <span>身份证号：</span>
                    <div class="right">
                      <span>{{item.carOwnerIdCard || '--'}}</span>
                    </div>
                  </div>
                  <div class="list">
                    <span>发动机编号：</span>
                    <div class="right">
                      <span>{{item.engineNo || '--'}}</span>
                    </div>
                  </div>
                  <div class="list">
                    <span>车辆识别代码：</span>
                    <div class="right">
                      <span>{{item.carVINNo || '--'}}</span>
                    </div>
                  </div>
                </div>
                <div class="item_2">
                  <div class="list">
                    <span>行驶证：</span>
                    <div class="right">
                      <img class="pic" :src="item.drivingLicenseFrontImgUrl"/> 
                      <img class="pic" :src="item.drivingLicenseBackImgUrl"/> 
                    </div>
                  </div>
                  <div class="list">
                    <span>身份证：</span>
                    <div class="right">
                      <img class="pic" :src="item.carOwnerIdCardFrontImgUrl"/> 
                      <img class="pic" :src="item.carOwneIdCardBackImgUrl"/> 
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- <div class="detail-item">
        <div class="item">
          <div class="title">维保记录</div>
          <div class="jx-table">
            <el-table :data="maintenance" border style="width: 100%" v-loading="boo.main_loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="item1" label="时间" width="120" align="center">
              </el-table-column>
              <el-table-column prop="item2" label="服务商" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item3" label="订单号" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item4" label="服务商类型" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item5" label="项目" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item6" label="金额" align="center" :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">出险记录</div>
          <div class="jx-table">
            <el-table :data="risk" border style="width: 100%" v-loading="boo.risk_loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="item1" label="出险时间" width="120" align="center">
              </el-table-column>
              <el-table-column prop="item2" label="服务商" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item3" label="出险总额" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item4" label="出险类型" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item5" label="换件数量" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item6" label="换件总额" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item7" label="维修次数" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item8" label="维修总额" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item9" label="其他金额" align="center" :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">保险信息</div>
          <div class="jx-table">
            <el-table :data="detail" border style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="item1" label="保险到期时间" width="120" align="center">
              </el-table-column>
              <el-table-column prop="item2" label="户主" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="time" label="购买保险日期" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item3" label="保险公司" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item4" label="销售流量" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item5" label="车船税订单号" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item6" label="商业险订单号" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item7" label="车船税费" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item8" label="商业险保费" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item9" label="上年度出险次数" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item10" label="折扣率" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item11" label="累计保费" align="center" :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div> -->
    </div>
    <!-- 活动区域 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">活动区域</span>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="列表显示" name="first">
          <div class="jx-table">
            <el-table :data="activelist" border style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="item1" label="所在地区" width="120" align="center">
              </el-table-column>
              <el-table-column prop="item2" label="所属商圈" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item3" label="详细地址" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span><img class="icon" src="/static/img/u178.png"/>{{scope.row.item3}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="item4" label="最近一次时间" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item5" label="7日停留" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{scope.row.item5}}天</span>
                </template>
              </el-table-column>
              <el-table-column prop="item6" label="累计停留" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{scope.row.item6}}天</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="地图显示" name="second">
          <baidu-map class="map" :style="{width:map.width,height:map.height}" :center="{lng: map.center.lng, lat: map.center.lat}" ak="6L8ztzxMpKhac2issa1rETQz82OBpmZo" :zoom="map.zoom" @ready="handler" :scroll-wheel-zoom="true">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bml-marker-clusterer :averageCenter="true">
              <bm-marker v-for="(item,index) of markers" :key="index" :position="{lng: item.lng, lat: item.lat}"></bm-marker>
            </bml-marker-clusterer>
          </baidu-map>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
	</div>
</template>

<script>
  const activelist = []
  //百度地图
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
	export default {
    name: "pm-distribution",
    components: {
      BaiduMap,
      BmNavigation,
      BmMarkerClusterer,
      BmMarker,
    },
		data() {
			return {
        https: this.$api.user.detail,
        boo: {
          showDialog: false,
          saveing: false,
          loading: false,
          loadinginfo: false,
          id: this.$route.query.id,
          main_loading: false,
          risk_loading: false,
        },
        other: {
          activeName: '',
        },
        activeName: 'first',
        activelist: activelist,
        map:{ 
            center: {lng: 116.404, lat: 39.915},
            zoom: 4,
            width:'100%',
            height:'400px'
        },
        markers:[],
        userDetail: '',
        detail: [],
        maintenance: [],
        risk: []
			}
		},
		mounted(){
      let _self = this
      _self.getDetail()
    },
		methods: {
      back(){
        history.go(-1)
      },
      getDetail(){
        let _self = this
        let params = {
          id: this.$route.query.id,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.userDetail = res.retObject
            _self.other.activeName = res.retObject.cars[0].carModel
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(`${_self.https}${params.id}`, {}, success) 
      },
      editRow(){
        let _self = this
        // _self.boo.showDialog = true
      },
      handler ({BMap, map}) {
        this.map.center.lng = 116.404
        this.map.center.lat = 39.915
        this.map.zoom = 5
        this.map.height=document.body.clientHeight -160+'px';
        this.getProPositionMap();
      },
      //项目分布地图
      getProPositionMap(){
        for (let i = 0; i < 10; i++) {
          const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
          this.markers.push(position)
        }
      },
    }
	}

</script>
<style scoped lang="sass">
  .jx-table 
    padding: 0
  .jx-table
    .el-table 
      .cell
        .icon
          width: 16px
          height: 17px
          position: relative
          top: 2px
  .map 
    width: 100%
    height: 300px
    .BMap_Marker.BMap_noprint 
      background: url('/static/img/marker_red_sprite.png') no-repeat
  /deep/ .el-tabs__nav-scroll
    border-bottom: 1px solid #E4E7ED
    background: #e6f5ff
  /deep/ .el-tabs__item.is-active
    font-weight: 600
  /deep/ .el-tabs__item
    font-size: 14px
    line-height: 40px
    height: 40px
</style>
